import * as THREE from "three";
import { useEffect, useRef } from "react";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import img1 from '../../static/vr/dianshi.jpg'
import img2 from '../../static/vr/shujia.jpg'
import img3 from '../../static/vr/top.jpg'
import img4 from '../../static/vr/bottom.jpg'
import img5 from '../../static/vr/qiang.jpg'
import img6 from '../../static/vr/keting.jpg'
//语音播报功能
import { VolumeO } from '@react-vant/icons'
import { NoticeBar } from 'react-vant'
import { useNavigate } from 'react-router-dom'
import style from './style.module.css'
import { LeftOutline } from 'antd-mobile-icons';

function App() {
  const navigate = useNavigate()
  const containerRef = useRef()


  const loadTextrue = (url) => {
    const loader = new THREE.TextureLoader()
    const texture = loader.load(url)
    const material = new THREE.MeshBasicMaterial({
      map: texture,
      side: THREE.DoubleSide,
    });
    return material
  }

  useEffect(() => {
    const camera = new THREE.PerspectiveCamera(
      70,
      window.innerWidth / window.innerHeight,
      0.01,
      10
    );
    camera.position.z = 1;

    const scene = new THREE.Scene();


    const arr = [
      loadTextrue(img1),
      loadTextrue(img2),
      loadTextrue(img3),
      loadTextrue(img4),
      loadTextrue(img5),
      loadTextrue(img6),
    ]
    const geometry = new THREE.BoxGeometry(4, 4, 4);


    const mesh = new THREE.Mesh(geometry, arr);
    scene.add(mesh);

    // 辅助轴画线
    // const ax = new THREE.AxesHelper();
    // scene.add(ax);


    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setAnimationLoop(animation);

    containerRef.current.appendChild(renderer.domElement);


    // animation

    function animation(time) {
      // 可以进行旋转
      // mesh.rotation.x = time / 2000;
      // mesh.rotation.y = time / 1000;

      renderer.render(scene, camera);
    }

    new OrbitControls(camera, renderer.domElement);

  }, []);


  return <>
    {/* 3D看房实时语音播报 */}
    <NoticeBar
      leftIcon={<VolumeO />}
      text='3D看房实时语音播报 3D看房实时语音播报 3D看房实时语音播报'
    />
    {/* 3D动图展示 */}
    <div className={{ width: '100vw', height: "100vh" }} ref={containerRef}>
      <div className={style['go_back']} onClick={() => { navigate(-1) }}><LeftOutline style={{ color: '#fff', fontSize: '20px' }} /></div>
    </div>

  </>
}

export default App;